import { Flex, Form, Radio, DatePicker, Select, Button, Table, Pagination, Modal, message} from 'antd';
import style from '../css/CopyScheduling.module.scss'
import type { RadioChangeEvent, DatePickerProps } from 'antd';
import { useState } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { TableProps } from 'antd/lib';
function CopyScheduling() {
    const [form] = Form.useForm();
    const [formOne] = Form.useForm();
    // 排班医生数据
    const [people]=useState([
        {
            value:'门诊外科',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生1', label: '李医生1' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value:'门诊内科',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生2', label: '李医生2' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value:'骨科',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生20', label: '李医生20' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value:'耳鼻喉科',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生4', label: '李医生4' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value:'心内科',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生5', label: '李医生5' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value:'皮肤科',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生6', label: '李医生6' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value:'中医科1',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生7', label: '李医生7' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value:'中医科2',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生8', label: '李医生8' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value:'中医科3',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生9', label: '李医生9' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
        {
            value:'中医科4',
            doctor:[
                { value: '全部', label: '全部' },
                { value: '李医生10', label: '李医生10' },
                { value: '李医生', label: '李医生' },
                { value: '黄医生', label: '黄医生' },
                { value: '欧阳医生', label: '欧阳医生' },
                { value: '王医生', label: '王医生' },
                { value: '刘医生', label: '刘医生' },
            ]
        },
    ])
    // 选择科室
    const [selects,setSelects] = useState<any>(0)
    const getdepart=(value:string)=>{
        setSelects(people.findIndex(person => person.value === value))
    }
    // 单选框
    const [value, setValue] = useState(1);
    const onChange = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    // 日期选择
    const chosedata: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
    };
    
    // 表格数据
    interface DataType {
        key: string;
        Department: string;
        mount: number;
        doctor: string;
        date: string;
        periodtime: string;
        consultingroom: string;
        type: string;
    }

    const columns: TableProps<DataType>['columns'] = [
        {
            title: '排班科室',
            dataIndex: 'Department',
            key: 'Department',
        },
        {
            title: '排班医生',
            dataIndex: 'doctor',
            key: 'doctor',
        },
        {
            title: '排班日期',
            dataIndex: 'date',
            key: 'date',
        },
        {
            title: '排班时段',
            key: 'periodtime',
            dataIndex: 'periodtime',
        },
        {
            title: '排班诊室',
            key: 'consultingroom',
            dataIndex: 'consultingroom',
        },
        {
            title: '挂号种类',
            key: 'type',
            dataIndex: 'type',
        },
        {
            title: '号源数量',
            key: 'mount',
            dataIndex: 'mount',
        },
    ];

    const data: DataType[] = [
        {
            key: '1',
            Department: '门诊外科',
            doctor: '李医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 32,
        },
        {
            key: '2',
            Department: '门诊外科',
            doctor: '张医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 42,
        },
        {
            key: '3',
            Department: '门诊外科',
            doctor: '李医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 32,
        },
        {
            key: '4',
            Department: '门诊外科',
            doctor: '王医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 32,
        },
        {
            key: '5',
            Department: '门诊外科',
            doctor: '李医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 32,
        },
        {
            key: '6',
            Department: '门诊外科',
            doctor: '张医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 42,
        },
        {
            key: '7',
            Department: '门诊外科',
            doctor: '王医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 32,
        },
        {
            key: '8',
            Department: '门诊外科',
            doctor: '李医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 32,
        },
        {
            key: '9',
            Department: '门诊外科',
            doctor: '张医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 42,
        },
        {
            key: '10',
            Department: '门诊外科',
            doctor: '王医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 32,
        },
        {
            key: '11',
            Department: '门诊外科',
            doctor: '张医生',
            date: '2024-07-08',
            periodtime: '上午(08:00-12:00)',
            consultingroom: '门诊外一诊室',
            type: '主任医师号',
            mount: 42,
        },
    ];
    // 对话框日期选择
    const modaldate: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
    };
    // 重置
    const reset=()=>{
        console.log('重置')
        form.resetFields()
    }
    // 搜索
    const serch=()=>{
        console.log('搜索')
        form.validateFields().then(values => {
            console.log('Validated values: ', values);
        }).catch(info => {
            console.log('Validate Failed:', info);
        });
    }
    const copy=()=>{
        console.log('复制排班')
        setCopyopen(true)
    }
    // 对话框
    const [copyloading,setCopyloading] = useState(false)
    const [copyopen,setCopyopen] = useState(false)
    // 对话框排班科室
    const [modaloptions,setModaloptions] = useState(0)
    const getmodaldepart=(value:string)=>{
        console.log(people.findIndex(person => person.value === value))
        setModaloptions(people.findIndex(person => person.value === value))
    }
    // 确定
    const copyOk=()=>{
        console.log('确定')
        setCopyloading(true)
        setTimeout(() => {
            setCopyloading(false)
            formOne.validateFields().then(values => {
                console.log('Validated values: ', values);
                setCopyopen(false)
                message.success(`复制排班操作成功！`);
            }).catch(info => {
                console.log('Validate Failed:', info);
            });
        }, 2000);
    }
    // 取消
    const copyCancel=()=>{
        console.log('取消')
        setCopyopen(false)
        message.warning('已取消操作')
    }
    return (
        <>
            {/* 复制排班对话框 */}
            <Modal
                title='复制排班'
                open={copyopen}
                width={640}
                height={415}
                onCancel={copyCancel}
                footer={[
                    <Flex key='flex' justify='flex-end'>
                        <Button key="back" onClick={copyCancel} style={{ height: 32, marginRight: 10 }}>
                            取消
                        </Button>,
                        <Button key="submit" type="primary" loading={copyloading} onClick={copyOk} style={{ height: 32 }}>
                            确认
                        </Button>,
                    </Flex>
                ]}
            >
                <div className={style.Sourcescheduling}>
                    <p className={style.title}>源排班</p>
                    <ul className={style.info}>
                        <li>排班科室：<span>门诊外科</span></li>
                        <li>排班医生：<span>李医生</span></li>
                        <li>排班日期：<span>2024-07-08</span></li>
                    </ul>
                </div>
                <div className={style.mpdalform}>
                    <p className={style.title}>目标排班</p>
                    <Form
                        form={formOne}
                        className={style.styleform}
                    >
                        <Form.Item label='排班科室' rules={[{required:true}]} name='modaldepart' className={style.itemstyle}>
                            <Select
                                style={{ width: 200 ,height:32,borderRadius:0}}
                                options={people}
                                placeholder='请选择'
                                onChange={getmodaldepart}
                            />
                        </Form.Item>
                        <Form.Item label='排班医生' rules={[{required:true}]} name='modaldoctor' className={style.itemstyle}>
                            <Select
                                placeholder='请选择'
                                style={{ width: 200 ,height:32,borderRadius:0}}
                                options={people[modaloptions].doctor}
                            />
                        </Form.Item>
                            <Form.Item label='排班日期' name='modaldate' className={style.itemstyle}>
                                <DatePicker style={{width:200,height:32,borderRadius:0}} onChange={modaldate} />
                            </Form.Item>
                            <Form.Item className={style.itemstyle}>
                                
                            </Form.Item>
                    </Form>
                </div>
            </Modal> 
            {/* 搜索盒子 */}
            <div className={style.searchboxs}>
                <Form
                    form={form}
                    initialValues={{methods:value}}
                >
                    <Flex style={{ width: '100%', marginBottom: 20 }}>
                        <Form.Item label="排班方式" name='methods' className={style.itemstyle}>
                            <Radio.Group onChange={onChange}>
                                <Radio value={1}>按天</Radio>
                                <Radio value={2}>按周</Radio>
                                <Radio value={3}>按月</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label='排班日期' name='date' className={style.itemstyle}>
                            <DatePicker allowClear style={{ width: 200, height: 32 }} onChange={chosedata} />
                        </Form.Item>
                    </Flex>
                    <Flex style={{ width: '100%' }} justify='space-between' align='center'>
                        <Flex>
                            <Form.Item label='排班科室' name='depart' className={style.itemstyle} style={{ marginRight: 80 }}>
                                <Select
                                    placeholder='请选择'
                                    style={{ width: 200, height: 32 }}
                                    options={people}
                                    onChange={getdepart}
                                >
                                </Select>
                            </Form.Item>
                            <Form.Item label='排班医生' name='doctor' className={style.itemstyle}>
                                <Select
                                    style={{ width: 200, height: 32 }}
                                    placeholder="请选择医生"
                                    options={people[selects].doctor}
                                >
                                </Select>
                            </Form.Item>
                        </Flex>
                        <Flex>
                            <Button style={{
                                width: 61,
                                height: 32,
                                marginRight: 10
                            }} onClick={()=>reset()}>重置</Button>
                            <Button style={{
                                width: 75,
                                height: 32
                            }} type="primary" onClick={()=>serch()} icon={<SearchOutlined />}>
                                搜索
                            </Button>
                        </Flex>
                    </Flex>
                </Form>
            </div>
            <div className={style.Schedulinglists}>
                <div className={style.liststitle}>
                    <p className={style.title}>源排班预览数据</p>
                    <Button onClick={()=>copy()} style={{
                        width: 89,
                        height: 32,
                        borderRadius: 0
                    }} type="primary">
                        复制排班
                    </Button>
                </div>
                <Table<DataType> className={style.tabledata} columns={columns} pagination={false} dataSource={data} />
                <Pagination style={{ marginTop: 20 }} showQuickJumper defaultCurrent={2} total={300} showTotal={(total) => `共 ${total} 条数据`} align="end" />
            </div>
        </>
    );
}

export default CopyScheduling;